<template>
  <div>
    <div class="title">用户管理</div>
    <div style="background-color: #fff;width: 100%;">
      <div style="padding: 10px 10px 10px 10px; display: flex;">
        <el-input placeholder="请输入用户id/注册邮箱/手机号" @click-suffix="search" suffix-icon="el-icon-search" style="width: 300px;">
        </el-input>
      </div>

      <!-- 表格 -->
      <div style="padding:10px;margin-bottom: 100px;margin-right:50px ;">
        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" style="width: 100%">

          <el-table-column prop="username" label="用户名" width="220">
          </el-table-column>
          <el-table-column prop="id" label="用户id" width="280">
          </el-table-column>
          <el-table-column prop="phone" label="手机号" width="220">
          </el-table-column>
          <el-table-column prop="email" label="邮箱" width="220">
          </el-table-column>
          <el-table-column label="注册状况" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.register === 1" style="color:#20da58">已注册</span>
              <span v-if="scope.row.register === 2" style="color:#DAA520">已注销</span>

            </template>
          </el-table-column>
          <el-table-column label="登陆状况" width="120">
            <template slot-scope="scope">

              <span v-if="scope.row.status === 0" style="color:#da2020">离线中</span>
              <span v-if="scope.row.status === 1" style="color:#20da58">登录中</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <span class="handle" @click="logout()">登出</span>
            <span class="handle" style="color: #da2020;" @click="logoff()">注销</span>
          </el-table-column>



        </el-table>
        <el-pagination style="margin-top: 20px;" :page-size="100" layout="total, prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData:[
        { username: '我爱学习123', id: '9552023413', phone: '15449354682', register: 1, status: 0 ,email:'2467213191@qq.com'},
        { username: '我爱学习123', id: '9552023413', phone: '15449354682', register: 2, status: 0 , email: '2467213191@qq.com' },
        { username: '我爱学习123', id: '9552023413', phone: '15449354682', register: 1, status: 0 , email: '2467213191@qq.com' },
        { username: '我爱学习123', id: '9552023413', phone: '15449354682', register: 1, status: 0 , email: '2467213191@qq.com' },
        { username: '我爱学习123', id: '9552023413', phone: '15449354682', register: 1, status: 0 , email: '2467213191@qq.com' },
        { username: '我爱学习123', id: '9552023413', phone: '15449354682', register: 1, status: 1 , email: '2467213191@qq.com' },
        { username: '我爱学习123', id: '9552023413', phone: '15449354682', register: 1, status: 1 , email: '2467213191@qq.com' },
        { username: '我爱学习123', id: '9552023413', phone: '15449354682', register: 1, status: 1 , email: '2467213191@qq.com' },
        { username: '我爱学习123', id: '9552023413', phone: '15449354682', register: 2, status: 0 , email: '2467213191@qq.com' },
      ]
    }
  },
  methods: {
    logout(){

    },
    logoff(){

    }
  }
}
</script>

<style scoped>
.title {
    font-size: larger;
    margin: 10px 10px 30px 0;
    /* font-family: Microsoft YaHei; */
}
.handle {
    margin: 0 10px;
    color: #409EFF;
    /* 鼠标移上去有手形 */
    cursor: pointer
}
</style>